<template>
	<view>
		<view class="my-menu">
			<view class="header bg-gradual-blue">
				<view :style="{'margin-top': menuButtonTop,'width': '100%'}" class="u-flex">
					<u-avatar :src="fileURL + userdetail.photo" :show-sex="false" size="default"></u-avatar>
					<view class="u-flex-1">
						<view>
							<text class="u-m-l-20 u-m-r-10 u-font-32 u-flex-1">{{userdetail.name}}</text>
						</view>
						<view>
							<text class="u-m-l-20 u-font-24">{{online?'在线':'离线'}}</text>
						</view>
					</view>
					<!-- 切换身份 -->
					<!-- <change-identities bg="#ffffff"></change-identities> -->
				</view>
			</view>
			<view class="grid-box">
				<view class="u-flex">
					<navigator url="/pages/brother/incomOrder/incomOrder" class="item">
						<view><text class="iconfont icon-ruku u-font-40"></text></view>
						<view class="u-p-t-10"><text class="tl">入库单</text></view>
						<!-- <view><text class="num">{{orderNum}}条</text></view>
						<view><text class="u-tips-color u-font-24">待入库单数</text></view> -->
					</navigator>
					<navigator url="/pages/brother/outOrder/outOrder" class="item">
						<view><text class="iconfont icon-chuku u-font-40"></text></view>
						<view class="u-p-t-10"><text class="tl">出库单</text></view>
						<!-- <view><text class="num">{{storeOrderNum}}条</text></view>
						<view><text class="u-tips-color u-font-24">待出库单数</text></view> -->
					</navigator>
					<!-- <navigator url="/pages/brother/transferOrder/transferOrder" class="item">
						<view><text class="iconfont icon-wuliu u-font-40"></text></view>
						<view class="u-p-t-10"><text class="tl">移库单</text></view>
					</navigator> -->
				</view>
			</view>
			<!-- <view class="grid-box">
				<view class="u-flex">
					<view class="item">
						<view><text class="iconfont icon-dingdan u-font-40"></text></view>
						<view><text class="tl">违规申诉</text></view>
						<view><text class="num">0条</text></view>
					</view>
					<view class="item">
						<view><text class="iconfont icon-dianping u-font-40"></text></view>
						<view><text class="tl">我的评价</text></view>
						<view><text class="num">8条</text></view>
					</view>
				</view>
			</view> -->
			<view class="grid-box">
				<view class="head-title"><text>常用功能</text></view>
				<view class="u-flex common">
					<!-- <navigator url="/pages/brother/privacyPolicy/privacyPolicy" class="grid-item">
						<view class="icon"><text class="iconfont icon-dingdan bg"></text></view>
						<view><text>隐私政策</text></view>
					</navigator>
					<navigator url="/pages/brother/serviceAgreement/serviceAgreement" class="grid-item">
						<view class="icon"><text class="iconfont icon-yonghuxieyi bg"></text></view>
						<view><text>用户协议</text></view>
					</navigator> -->
					<navigator url="/pages/brother/statistics/recovery/recovery" class="grid-item">
						<view class="icon"><text class="iconfont icon-shuju bg"></text></view>
						<view><text>回收统计</text></view>
					</navigator>
				</view>
			</view>
			<!-- <view class="grid-box">
				<view class="head-title"><text>我的二维码</text></view>
				<view class="u-p-t-20">
					<u-image 
						class="u-flex u-border"
						width="420rpx"
						src="" 
						mode="widthFix">
					</u-image>
				</view>
			</view> -->
			<view class="u-p-30">
				<u-button type="error" @click="logout">退出登录</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex';
	
	export default {
		name:"homeSlice",
		data() {
			return {
				menuButtonTop: '44px',
				menuButtonHeight: '20px',
				orderNum: 0,
				storeOrderNum: 0,
				userOrderNum: 0
			};
		},
		computed: {
			...mapState({
				userdetail: state => state.userdetail,
				toDay: state => state.toDayCount,
				myWallet: state => state.myWallet
			}),
			...mapState('brother',{
				online: state => state.online,
				brotherTrip: state => state.brotherTrip
			})
		},
		created() {
			// #ifdef MP-WEIXIN
			this.menuButtonTop = wx.getMenuButtonBoundingClientRect().top + 'px'
			this.menuButtonHeight = wx.getMenuButtonBoundingClientRect().height + 'px'
			// #endif
		},
		methods: {
			phone(){
				// //#ifdef APP-PLUS
				// plus.device.dial(, true);
				// //#endif
				
				uni.makePhoneCall({
					phoneNumber: this.$store.state.webSetting.telphone
				})
			},
			// 退出
			logout() {
				uni.removeStorageSync('lifeData');
				this.$store.commit('setOnline', false)
				// this.$store.dispatch('signalrConnectionClose')
				// if(this.$store.state.connection){
				// 	this.$store.state.connection.stop()
				// }s
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 我的
	.my-menu {
		background-color: #f4f4f5;
		height: 100vh;
		
		.header {
			padding: 0 40rpx 40rpx;
			position: sticky;
			top: 0;
			display: flex;
			align-items: center;
		}
	
		.grid-box {
			.u-flex {}
	
			.item {
				flex: 1;
				text-align: center;
	
				.num {
					color: $u-color-orange;
					font-weight: bold;
				}
			}
	
			.common {
				flex-wrap: wrap;
				// justify-content: space-between;
	
				.grid-item {
					text-align: center;
					margin: 20rpx 0;
					width: 142rpx;
	
					.icon {
						border: 1px solid $u-border-color;
						display: inline-block;
						border-radius: 50%;
						width: 80rpx;
						height: 80rpx;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						margin: 10rpx 0;
	
						.iconfont {
							font-size: 44rpx;
						}
					}
				}
			}
		}
	}
</style>